<template>
  <div style="margin-top: 12px;margin-left: 15px;">
    <el-row :gutter="25">
      <el-col :span="8">
        <el-card class="card_box">
          <el-row>
            <el-col :span="12">
              <el-avatar icon="el-icon-s-custom" class="el-avatar" :style="adminForm.avatarClass" :size="200"/>
            </el-col>
            <el-col :span="12" class="word_box">
              <span v-text="adminForm.adminName"></span>
              <div v-text="adminForm.job"></div>
            </el-col>
          </el-row>
          <br />
          <hr />
          <br />
          <el-row style="margin-left: 60px;">
            <el-col :span="13">
              <div>登录时间</div>
            </el-col>
            <el-col :span="11">
              <div v-text="adminForm.loginTime"></div>
            </el-col>
          </el-row>
          <br />
          <el-row style="margin-left: 60px;">
            <el-col :span="13">
              <div>当前时间</div>
            </el-col>
            <el-col :span="11">
              <div v-text="dateFormat(date)"></div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="20">
          <el-col :span="8">
              <el-card class="card1">
                <el-row>
                  <el-col :span="12">
                    <el-avatar shape="square" icon="el-icon-user-solid" class="avatar1" :size="100"/>
                  </el-col>
                  <el-col :span="12">
                    <div class="count" v-text="userCount"></div>
                    <div class="huiyuan">已注册会员</div>
                  </el-col>
                </el-row>
              </el-card>
          </el-col>
          <el-col :span="8">
              <el-card class="card2">
                <el-row>
                  <el-col :span="12">
                    <el-avatar shape="square" icon="el-icon-bank-card" class="avatar2" :size="100"/>
                  </el-col>
                  <el-col :span="12">
                    <div class="count" v-text="cardCount"></div>
                    <div class="huiyuan">已办理会员卡</div>
                  </el-col>
                </el-row>
              </el-card>
          </el-col>
          <el-col :span="8">
              <el-card class="card3">
                <el-row>
                  <el-col :span="12">
                    <el-avatar shape="square" icon="el-icon-s-ticket" class="avatar3" :size="100"/>
                  </el-col>
                  <el-col :span="12">
                    <div class="count" v-text="movieCount"></div>
                    <div class="huiyuan">已售电影票</div>
                  </el-col>
                </el-row>
              </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row :gutter="25">
      <el-col :span="8">
        <el-card class="money_card">
          <div class="title">交易金额比例</div>
          <br/><hr /><br />
          <div>
            <div>消费</div>
            <el-progress :percentage="recordForm.consume" color="limegreen"></el-progress>
            <div style="margin-top: 10px;">充值</div>
            <el-progress :percentage="recordForm.recharge" color="yellow"></el-progress>
            <div style="margin-top: 10px;">积分兑换</div>
            <el-progress :percentage="recordForm.integral" color="dodgerblue"></el-progress>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="table_card" style="height: 583px;">
          <el-row>
            <el-col :span="22">
              <div class="title">电影票</div>
            </el-col>
            <el-col :span="2">
              <el-link type="primary" style="font-size: medium;" :underline="false" @click="addBtn">电影上架</el-link>
            </el-col>
          </el-row>
          <br /><hr />
          <div class="table">
            <el-table :data="movieList"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}"
            style="width: 98%;margin-left: 10px;margin-bottom: 25px;"
            border>
              <el-table-column type="selection" width="60px">
              </el-table-column>
              <el-table-column prop="id" label="ID" width="120px"></el-table-column>
              <el-table-column prop="name" label="电影名" width="240px">
                <template slot-scope="scope">
                  <span style="color: black">《 {{scope.row.name}} 》</span>
                </template>
              </el-table-column>
              <el-table-column prop="integral" label="积分" width="70px"></el-table-column>
              <el-table-column prop="price" label="价格" width="70px"></el-table-column>
              <el-table-column prop="count" label="售出" width="70px"></el-table-column>
              <el-table-column prop="movieTime" label="电影时长" width="150px"></el-table-column>
              <el-table-column label="操作" width="208px">
                <template slot-scope="scope">
                  <el-link type="primary" icon="el-icon-refresh" :underline="false" class="bianji" @click="updateBtn(scope.row)">更新</el-link>
                  <el-link type="primary" icon="el-icon-bottom" :underline="false" @click="deleteBtn(scope.row)">下架</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="el-pagination">
            <el-pagination
                  background
                 @current-change="handleCurrentChange"
                 :current-page="pageForm.pageNum"
                 :page-size="pageForm.pageSize"
                 layout="total,prev, pager, next"
                 :total="total">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="电影上架" :visible.sync="addDialog" width="35%" @close="closeAddDialog">
      <el-form :model="addMovieForm" :rules="rules" ref="addMovieFormRef" label-width="100px" style="width: 90%;">
        <el-form-item label="电影名" prop="name">
          <el-input v-model="addMovieForm.name"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="integral">
          <el-input v-model="addMovieForm.integral"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="addMovieForm.price"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="movieTime">
          <el-input v-model="addMovieForm.movieTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addMovie">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="电影更新" :visible.sync="updateDialog" width="35%" @close="closeUpdateDialog">
      <el-form :model="updateMovieForm" :rules="rules" ref="updateMovieFormRef" label-width="100px" style="width: 90%;">
        <el-form-item label="电影名" prop="name">
          <el-input v-model="updateMovieForm.name"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="integral">
          <el-input v-model="updateMovieForm.integral"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="updateMovieForm.price"></el-input>
        </el-form-item>
        <el-form-item label="售出" prop="count">
          <el-input v-model="updateMovieForm.count"></el-input>
        </el-form-item>
        <el-form-item label="时长" prop="movieTime">
          <el-input v-model="updateMovieForm.movieTime"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateMovie">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import { Dropdown,DropdownMenu,DropdownItem } from 'element-ui';
  export default {
    created() {
      this.adminForm=JSON.parse(window.sessionStorage.getItem("admin"))
      this.getUserCount()
      this.getCardCount()
      this.getMovieCount()
      this.getRecord()
      this.getMovieList()
    },
    data() {
      const checkCount = (rule, value, callback) => {
        //定义充值金额的正则表达式  JS中用/来表示正则表达式的开始和结束
        const countRege = /(^[0-9]{1}$)|(^[1-9]{1}[0-9]*$)/
        // const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
        if (countRege.test(value)) {
          //表示金额合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的售出数量'))
      }
      const checkIntegral = (rule, value, callback) => {
        //定义充值金额的正则表达式  JS中用/来表示正则表达式的开始和结束
        const integralRege = /(^[1-9]{1}[0-9]*$)/
        // const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
        if (integralRege.test(value)) {
          //表示金额合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的电影积分'))
      }
      const checkPrice = (rule, value, callback) => {
        //定义充值金额的正则表达式  JS中用/来表示正则表达式的开始和结束
        const priceRege = /(^[1-9]{1}[0-9]*$)|(^0[\.]{1}0[1-9]{1}$)|(^0[\.]{1}[1-9]{1}[0-9]{0,1}$)|(^[1-9]{1}[0-9]*[\.]{1}[0-9]{1,2}$)/
        // const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
        if (priceRege.test(value)) {
          //表示金额合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的电影价格'))
      }
      const checkMovieTime = (rule, value, callback) => {
        //定义充值金额的正则表达式  JS中用/来表示正则表达式的开始和结束
        const movieTimeRege = /(^[0-9]{2}[\:]{1}[0-9]{2}[\:]{1}[0-9]{2}$)/
        // const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        //正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回false
        if (movieTimeRege.test(value)) {
          //表示金额合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的电影时长'))
      }
      return {
        date:new Date(),
        recordForm:{},
        adminForm:{},
        userCount:0,
        cardCount:0,
        movieCount:0,
        movieList:[],
        total: 0,
        pageForm:{
          pageNum: 1,
          pageSize: 7
        },
        addDialog:false,
        addMovieForm:{},
        updateDialog:false,
        updateMovieForm:{},
        rules: {
          name: [
                  { required: true, message: '请输入电影名', trigger: 'blur' }
                ],
          price: [
                  { required: true, message: '请输入价格', trigger: 'blur' },
                  { validator: checkPrice , trigger: 'blur' }
                ],
          count: [
                  { required: true, message: '请输入销售量', trigger: 'blur' },
                  { validator: checkCount , trigger: 'blur' }
                ],
          integral: [
                  { required: true, message: '请输入积分', trigger: 'blur' },
                  { validator: checkIntegral , trigger: 'blur' }
                ],
          movieTime: [
                  { required: true, message: '请输入电影时长', trigger: 'blur' },
                  { validator: checkMovieTime , trigger: 'blur' }
                ]
        }
      }
    },
    methods:{
      async getRecord(){
        const {data:result} = await this.$http.get('/deal/getRecord')
        this.recordForm=result.data
      },
      async getUserCount(){
        const {data:result} = await this.$http.get('/user/getUserCount')
        this.userCount=result.data
      },
      async getCardCount(){
        const {data:result} = await this.$http.get('/card/getCardCount')
        this.cardCount=result.data
      },
      async getMovieCount(){
        const {data:result} = await this.$http.get('/movie/getMovieCount')
        this.movieCount=result.data
      },
      async getMovieList(){
        const {data:result} = await this.$http.get('/movie/getMovieListByPage',{params: this.pageForm})
        this.movieList=result.data.rows
        this.total=result.data.total
      },
      handleCurrentChange(pageNum){
        this.pageForm.pageNum = pageNum
        this.getMovieList()
      },
      addBtn(){
        this.addDialog=true
      },
      async addMovie(){
        this.$refs.addMovieFormRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          const {data:result} = await this.$http.post('movie/add',this.addMovieForm)
          if(result.status !== 200) return this.$message.error("电影上架失败!")
          this.$message.success("电影上架成功!")
          this.getMovieList()
          this.addDialog=false
        })
      },
      closeAddDialog(){
        this.$refs.addMovieFormRef.resetFields()
      },
      updateBtn(movie){
        this.getMovieList()
        this.updateMovieForm=movie
        this.updateDialog=true
      },
      async updateMovie(){
        this.$refs.updateMovieFormRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          const {data:result} = await this.$http.put('movie/updateMovie',this.updateMovieForm)
          if(result.status !== 200) return this.$message.error("电影更新失败!")
          this.$message.success("电影更新成功!")
          this.getMovieList()
          this.getMovieCount()
          this.updateDialog=false
        })
      },
      closeUpdateDialog(){
        this.$refs.updateMovieFormRef.resetFields()
      },
      async deleteBtn(movie){
        this.$confirm(`确定要下架电影《${movie.name}》吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () =>{
          const {data:result} = await this.$http.delete(`movie/delete?id=`+movie.id)
          if(result.status !==200) return this.$message.error("电影下架失败!")
          this.$message.success("电影下架成功!")
          this.getMovieList()
          this.getMovieCount()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      dateFormat(time) {
        var date=new Date(time);
        var year=date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
        // 拼接
        // return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        return hours+":"+minutes+":"+seconds;
      }
    },
    mounted () {
      var _this = this; //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
          _this.date = new Date();//修改数据date
      }, 1000);
    },
    beforeDestroy () {
      if(this.timer) {
        clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
      }
    }
    // components: {
    //   ElDropdown: Dropdown,
    //   ElDropdownMenu: DropdownMenu,
    //   ElDropdownItem: DropdownItem
    // }
  }
</script>

<style lang="less" scoped>
  .el-pagination{
    margin-left: 35px;
    margin-top: 10px;
  }
  .table_card{
    margin-top: -220px;
    width: 1050px;
    .title{
      font-size: 22px;
    }
    .bianji{
      margin-right: 15px;
    }
  }
  .money_card{
    margin-top: 30px;
    width: 500px;
    height: 335px;
    .title{
      font-size: 25px;
    }
  }
  .card_box{
    width: 500px;
    height: 400px;
    .el-avatar{
      font-size: 120px;
      margin-left: 20px;
    }
    .word_box{
      margin-top: 60px;
      padding-left: 50px;
    }
    span{
      font-size: 300%;
    }
    div{
      font-family: ;
    }
  }
  .card1{
    width: 320px;
    .avatar1{
      font-size: 50px;
      background-color: dodgerblue;
    }
    .count{
      font-size: 50px;
      color: dodgerblue;
      text-align: center;
      margin-top: 5px;
    }
    .huiyuan{
      text-align: center;
    }
  }
  .card2{
    width: 320px;
    .avatar2{
      font-size: 50px;
      background-color: limegreen;
    }
    .count{
      font-size: 50px;
      color: limegreen;
      text-align: center;
      margin-top: 5px;
    }
    .huiyuan{
      text-align: center;
    }
  }
  .card3{
    width: 320px;
    .avatar3{
      font-size: 50px;
      background-color: orangered;
    }
    .count{
      font-size: 50px;
      color: orangered;
      text-align: center;
      margin-top: 5px;
    }
    .huiyuan{
      text-align: center;
    }
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
